*{
  margin: 0;
  padding: 0;
}
ul,li{
  list-style: none;
}
a{
  text-decoration: none;
}

.navigation{
  position: fixed;
  height: 100vh;
  overflow: hidden;
  width: 30%;
  background-color: #fff !important;
  z-index: 20;
  .navbar{
    background-color: #fff !important;
    .container-fluid{
      display: flex;
      justify-content:center;
    }
  }
  .select{
    height: 740px;
    display: flex;
    vertical-align: middle;
    padding: 0 24px 0 84px;
    align-items:center;
    .nav{
      a{
        display: inline !important;
        padding: 0;
        text-decoration: none;
        color: rgba(0, 0, 0, 0.56);
      }
      :nth-child(1){
        margin-bottom: 15px;
        a{
          font-size: 26px;
          color: #000;
        }
      }
      :nth-child(2){
        margin-bottom: 15px;
        a{
          width: 100%;
          font-size: 16px;
          font-weight:bold;
          color: #000;
          padding-bottom: 5px;
          border-bottom: 4px solid rgb(0,168,98);
        }
      }
      :nth-child(3){
        margin-bottom: 15px;
        padding-bottom: 5px;
      a{
        font-size: 16px;
      }
      }
    }
  }
}
.content{
  width: 70%;
  margin-left: 30%; 

  .giftcard{
    width: 100%;
    position: relative;
    background-color: #00A862;
    span{
      color: #FFF;
      font-size: 12px;
      position: absolute;
      top: 10px;
      right: 10px;
      opacity: 0.6;
      border-radius: 2px;
      padding: 0px 6px;
      background-color: #000;
    }
    .giftcard-box{
      max-width: 768px;
      color: #fff;
      box-sizing: border-box;
      margin-left: auto;
      margin-right: auto;
      div{
        background-color: #00A862;
        border: transparent;
      }
      .left{
        .card-box{
              padding-top: 48px !important;
              padding-left: 24px;
              padding-right: 24px;
              padding-bottom: 0;
          .card-content{
            padding: 12px;
            :nth-child(1){
              color: rgba(255, 255, 255, 0.7);
              font-size: 14px;
            }
            h1{
              margin-bottom: 18px;
            }
          p{
            margin-bottom: 24px;
          }
          .btn-button{
            border-top-left-radius: 20px !important;
            border-top-right-radius: 20px !important;
            border-bottom-left-radius: 20px !important;
            border-bottom-right-radius: 20px !important;
            color: #fff;
            background-color: #00A862;
            border-color: #fff;
          }
        }
      }
      }
      .right{
        .card{
                padding-top: 48px !important;
                padding-left: 24px;
                padding-right: 24px;
                padding-bottom: 0;
                box-sizing: border-box;
          .card-img{
            width: 100%;
            padding: 12px;
            text-align: center;
            img{
              width: 65%;
            }
          }
        }
      }
    }
  }
}
.buy{
  position: relative;
  margin-left: 30%; 
  &::before{
      content: '';
      position: absolute;
      height: 84px;
      width: 100%;
      background:url(../../images/svc-wave.svg);
      background-repeat: repeat-x;
      z-index: 100;
    }
  .buy-box{
    display: flex;
    z-index: 10;
    .tmall{
      width: 33.3333%;
      padding:0 12px;
      padding-top: 74px;
      padding-bottom: 10%;
      position: relative;
      background-color: #C7BC87;
      .tmall-top{
        padding:0 12px;
        p{
          font-size: 14px;
          text-align: center;
          margin-bottom: 24px;
          color: #AA7A4A;
          font-weight: bolder;
        }
      }
      .tmall-content{
        padding: 12px;
        h3{
          font-size: 18px;
          text-align: center;
          color: #fff;
          font-weight: bolder;
          margin-bottom: 24px;
        }
        img{
          margin: 12px 0;
          max-width: 100%;
        }
      }
      .tmall-bottom{
        text-align: center;
        a{
          margin: 24px auto 0;
          padding: 6px 18px;
          border-radius: 48px;
          box-sizing: border-box;
          text-decoration: none;
          display: inline-block;
          border: 1px solid #FFF;
          background: transparent;
          color: #FFF;
        }
      }
      .tmalllog{
          bottom: 0px;
          position: absolute;
          left: 50%;
          margin: 0px;
          transform: translateX(-50%);
          width: 80%;
      }
    }
    .scancode{
      width: 33.3333%;
      padding:72px 24px 12px;
      position: relative;
      background-image: linear-gradient(-180deg, #36B35F 3%, #00A862 98%);
      .scancode-top{
        padding:0 12px;
        p{
          font-size: 14px;
          text-align: center;
          margin-bottom: 24px;
          font-weight: bolder;
          color: rgba(255, 255, 255, 0.7);
        }
      }
      .scancode-content{
          .say-img{
            margin-bottom: 24px;
            text-align: center;
            img{
              width: 60%;
              max-width: 100%;
            }
          }
          .milktea-img{
            margin-bottom: 24px;
            text-align: center;
            img{
              width: 100%;
              max-width: 100%;
            }
          }
      }
      .scancode-bottom{
        p{
          font-size: 16px;
          text-align: center;
          margin: 0 0 24px;
          color: #FFF;
        }
      }
    }
    .company{
      width: 33.3333%;
      padding:24px;
      padding-top: 72px;
      padding-bottom: 15%;
      position: relative;
      background-color: #EDEBE9;
      .company-top{
        p{
          font-size: 14px;
          text-align: center;
          margin-bottom: 24px;
          font-weight: bolder;
          color: rgb(103,102,101);
        }
      }
      .company-content{
        p{
          font-size: 16px;
          text-align: center;
          margin-bottom: 24px;
          color: rgba(0, 0, 0, 0.56);
          a{
            text-decoration: none;
            border: 0;
            color: #00A862;
          }
        }
      }
      .company-bottom{
        text-align: center;
        a{
          margin: 24px auto 24px;
          padding: 6px 18px;
          border-radius: 48px;
          box-sizing: border-box;
          text-decoration: none;
          display: inline-block;
          border: 1px solid #00A862;
          background: transparent;
          color: #00A862;
        }
      }
      .shoplog{
        bottom: 0px;
        position: absolute;
        left: 50%;
        margin: 20px 0 0 0;
        transform: translateX(-50%);
        width: 80%;
      }
    }
  }  

}
.series{
  width: 70%;
  margin-left: 30%;
  background-color: rgb(247,247,247);
  position: relative;
  .series-content{
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 768px;
    width: 100%;
    padding: 18px 24px;
    .series-top{
      padding-top: 24px;
      padding-bottom: 12px;
      h2{
        color: #000;
        font-size: 22px;
        text-align: center;
        margin-bottom: 18px;
      }
      .series-text{
        font-size: 14px;
        text-align: center;
        color: rgb(108,108,108);
        margin-bottom: 24px;
      }
      .box{
        .cards{
          .card-box{
            img{

            }
            .card-text{
              padding-bottom: 18px;
              p{
                color: rgba(0, 0, 0, 0.56);
                font-weight: normal;
                padding-bottom: 0px;
                margin-bottom: 0px;
                
              } 
            }
            span{
              font-size: 14px;
              background: #C2A661;
              color: #FFF;
              position: absolute;
              padding: 4px 12px;
              left: 0px;
              top: 6px;
            }
          }
          .card-box:hover{
            bottom: 5px;
            box-shadow: 0 2px 4px -1px rgb(122, 121, 121);
            }
        }
      }
      .but-tmall{
        text-align: center;
        a{
          margin: 24px auto 24px;
          padding: 6px 18px;
          border-radius: 48px;
          box-sizing: border-box;
          text-decoration: none;
          display: inline-block;
          border: 1px solid #00A862;
          background: transparent;
          color: #00A862;
        }
      }
    }
  }
}